<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{app.name}">主页面</title>
    <script th:inline="javascript" >
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridHeight = $(document).height()-2; /* -32 顶部主菜单高度，   -90 查询条件高度*/
            $("body").css("height",_gridHeight + "px");
        }

        $(function () {
            resizePageSize();
            $("#user-info-id").click(function (event) {
                event.stopPropagation();
                $("ul.gd-user-info >.gd-item-li-hidden").removeClass("gd-item-li-hidden");
            });
            
            $('body').click(function (event) {
                $("ul.gd-user-info >li").addClass("gd-item-li-hidden");
            });

            $(".gd-sys-menu > li").mouseenter(function (event) {
                $(this).parent().find(".active").removeClass("active");
                $(this).addClass("active");
                var menuId = $(this).attr("menuId");
                clickSysMenu(menuId);
            });
            $(".gd-sys-menu > li:first").mouseenter();

        });//ready
        
        function clickSysMenu(menuId) {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/getServiceMenu}]]*/'',
                data: [{name:"menuId",value:menuId}],
                success: function (data) {

                    var htmlContents = "";
                    $(data).each(function (index,item) {
                        htmlContents+="<li>";
                        htmlContents+='<a href="#">'
                                + '<i class="' + item.menuIcon+'"></i>'
                                + '<span>' + item.menuName+'</span>'
                                +'</a>';
                        htmlContents+="<ul class='gd-service-menu'"
                        $(item.childList).each(function (index1,item1) {
                            htmlContents+="<li>";
                            htmlContents+='<a href="'
                                + /*[[${#request.getContextPath()}]]*/''
                                + '/' +item1.menuUrl
                                +'" target="contents-window">'
                                + '<i class="' + item1.menuIcon+'"></i>'
                                + '<span>' + item1.menuName+'</span>'
                                +'</a>';
                            htmlContents+="</li>";
                        });
                        htmlContents+="</ul>"
                        htmlContents+="</li>";
                    });
                    $(".gd-service-menu").html(htmlContents);


                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/);
                }
            });


        }
    </script>
    <style>
        .gd-item-li-hidden{
            display: none !important;
        }
        .user-info-tool-bar{
            position: absolute;
            top: 10px;
            right: 0px;
            width: 141px;
        }
        .main-logo{
            width: 168px;
            height: 50px;
        }
        .gd-service-menu{
            padding-left: 15px;
        }

        .gd-service-menu > li{
            list-style: none;
        }
       .active > a{
            border-top: 3px solid #ff8400 !important;
        }

    </style>
</head>
<body style="display: flex;flex-direction: column;">
    <div>

        <img class="main-logo" th:if="${session.siteLanguage} eq 'en'" th:src="@{/assets/images/logo_en.png}">
        <img class="main-logo" th:if="${session.siteLanguage} neq 'en'" th:src="@{/assets/images/logo_zh.png}">
        <nav class="user-info-tool-bar">
            <a id="user-info-id" href="#">
                <i class="glyphicon glyphicon-user"></i>
                <span sec:authentication="principal.niceName"></span>
            </a>
            <ul class="gd-user-info nav navbar-btn">
                <li class="gd-item-li-hidden">
                    <a href="#">
                        <i class="glyphicon glyphicon-oil"></i>
                        <span th:text="#{main.user.modify}"></span>
                    </a>
                </li>
                <li class="gd-item-li-hidden">
                    <a href="#">
                        <i class="glyphicon glyphicon-ice-lolly"></i>
                        <span th:text="#{main.passwd.modify}"></span>
                    </a>
                </li>
                <li class="gd-item-li-hidden">
                    <a th:href="@{/logout}">
                        <i class="glyphicon glyphicon-off"></i>
                        <span th:text="#{main.user.logout}"></span>
                    </a>
                </li>
            </ul>
        </nav>

    </div>
    <ul class="gd-sys-menu nav nav-tabs">
        <li th:each="item : ${session.menu}" th:menuId = "${item.menuId}" >
            <a href="#" >
                <i th:class="${item.menuIcon}" ></i>
                <span th:text="${item.menuName}"></span>
            </a>
        </li>
    </ul>
    <section style="display: flex;flex-direction: row;flex-grow: 1">
        <ul class="gd-service-menu" style="width: 119px">

        </ul>
        <iframe name="contents-window" style="width: 100%;height: 100%;border: 0px solid #ddd;" th:src="@{/welcome}"></iframe>
    </section>


</body>
</html>